<template>
	<div style="display: flex;">
		<div class="left"><left-column></left-column></div>
		<div class="main">
			<!-- 时长部分 -->
			<div class="theme">
				<div style="color: white;width:200px;text-align: left;margin-bottom: 0.25rem;">
					<span>主题：</span>
					<span class="themeSpan" v-show="!edit">{{ description }}</span>
					<el-input style="width:100px;font-size: 1.375rem;" v-show="edit" v-model="description"></el-input>
					<i :class="{ 'el-icon-edit': !edit, 'el-icon-check': edit }" @click="edit = !edit"></i>
				</div>
				<div style="color: white;position:absolute;top:35px;">
					<svg class="icon" aria-hidden="true"><use xlink:href="#icon-zonghesum1"></use></svg>
					<span>完成:</span>
					<!-- <span :style="completeTextStyle">{{ completePomodoro }}/{{ totalPomodoro }}</span> -->
					<span>{{ completePomodoro }}分钟</span>
				</div>
			</div>
			<!-- 弹窗设置部分 -->
			<div style="font-size: 30px;position: absolute;left: 40px;top: 35px;">
				<svg style="background-color:aliceblue;border-radius: 5px;" @click="drawer = true" class="icon" aria-hidden="true"><use xlink:href="#icon-shezhi2"></use></svg>
				<!-- 开发：这里想设置多一个选背景 -->
				<!-- <svg style="margin-left: 10px; background-color: aliceblue;border-radius: 5px;" @click="drawer = true" class="icon" aria-hidden="true"><use xlink:href="#icon-tupian4"></use></svg> -->
			</div>
			<el-drawer title="番茄钟设置" :visible.sync="drawer" :direction="direction">
				<table class="pomodoro-display-controls">
					<!-- 设置番茄总数 -->
					<!-- 					<tr>
						<td><label for="total-pomodoro">番茄钟总数</label></td>
						<td><input id="total-pomodoro" type="number" min="1" max="10" placeholder="Total pomodoro" :value="totalPomodoro" @input="totalPomodoroChanged" /></td>
					</tr> -->
					<tr>
						<td><label for="work-duration">专注时间</label></td>
						<td><input id="work-duration" type="number" min="0" placeholder="Work Duration" :value="workDuration" @input="workDurationChanged" /></td>
					</tr>
					<!-- 休息时间 -->
					<!-- 		<tr>
						<td><label for="rest-duration">Rest Duration</label></td>
						<td><input id="rest-duration" type="number" min="0" placeholder="Rest Duration" :value="restDuration" @input="restDurationChanged" /></td>
					</tr> -->
					<!-- 设置番茄放大倍数 -->
					<!-- 					<tr>
						<td><label for="diameter">Diameter</label></td>
						<td><input id="diameter" type="number" min="0" placeholder="Diameter" :value="diameter" @input="diameterChanged" /></td>
					</tr> -->
					<tr>
						<td><label for="stroke-width">进度条宽度</label></td>
						<td><input id="stroke-width" type="number" min="0" placeholder="Stroke width" :value="strokeWidth" @input="strokeWidthChanged" /></td>
					</tr>
					<tr>
						<td><label for="start-color">进度条颜色</label></td>
						<td><input id="start-color" type="color" placeholder="Start color" :value="startColor" @input="startColorChanged" /></td>
					</tr>
					<!-- 					<tr>
						<td><label for="stop-color">Stop color</label></td>
						<td><input id="stop-color" type="color" placeholder="Stop color" :value="stopColor" @input="stopColorChanged" /></td>
					</tr> -->
					<tr>
						<td><label for="inner-stroke-color">背景颜色</label></td>
						<td><input id="inner-stroke-color" type="color" placeholder="Inner stroke color" :value="innerStrokeColor" @input="innerStrokeColorChanged" /></td>
					</tr>
					<tr>
						<td><label for="inner-text-color">时间颜色</label></td>
						<td><input id="inner-text-color" type="color" placeholder="Inner text color" :value="innerTextColor" @input="innerTextColorChanged" /></td>
					</tr>
				</table>
			</el-drawer>
			<!-- 番茄钟页面 -->
			<div class="pomodoro-display">
				<Pomodoro
					:total-pomodoro="totalPomodoro"
					:work-duration="workDuration"
					:diameter="diameter"
					:start-color="startColor"
					:stop-color="stopColor"
					:inner-text-color="innerTextColor"
					:stroke-width="strokeWidth"
					:inner-stroke-color="innerStrokeColor"
				></Pomodoro>
			</div>
		</div>
	</div>
</template>

<script>
import leftColumn from './leftColumn.vue';
import Pomodoro from './Pomodoro.vue';
export default {
	components: {
		leftColumn,
		Pomodoro
	},
	data() {
		return {
			/* 番茄钟默认设置 */
			totalPomodoro: 4,
			workDuration: 1,
			// restDuration: 5,
			startColor: localStorage.getItem('startColor') ? localStorage.getItem('startColor') : '#CCFFFF',
			stopColor:  '#99CCCC',
			strokeWidth: 10,
			innerStrokeColor: localStorage.getItem('innerStrokeColor') ? localStorage.getItem('innerStrokeColor') : '#0099CC',
			innerTextColor: localStorage.getItem('innerTextColor') ? localStorage.getItem('innerTextColor') : '#0099CC',
			diameter: 400,
			dialogVisible: false,
			description: '学习',
			edit: false,
			completePomodoro: 0,
			/* 左弹窗 */
			drawer: false,
			direction: 'ltr'
		};
	},
	methods: {
		totalPomodoroChanged(e) {
			e.preventDefault();
			const val = e.target.value;
			if (!val) {
				return false;
			}
			this.totalPomodoro = parseInt(val);
		},
		workDurationChanged(e) {
			e.preventDefault();
			const val = e.target.value;
			if (!val) {
				return false;
			}
			this.workDuration = parseInt(val);
		},
		// restDurationChanged(e) {
		// 	e.preventDefault();
		// 	const val = e.target.value;
		// 	if (!val) {
		// 		return false;
		// 	}
		// 	this.restDuration = parseInt(val);
		// },
		// diameterChanged(e) {
		// 	e.preventDefault();
		// 	const val = e.target.value;
		// 	if (!val) {
		// 		return false;
		// 	}
		// 	this.diameter = parseInt(val);
		// },
		innerTextColorChanged(e) {
			localStorage.setItem('innerTextColor', e.target.value);
			this.innerTextColor = e.target.value;
		},
		innerStrokeColorChanged(e) {
			localStorage.setItem('innerStrokeColor', e.target.value);
			this.innerStrokeColor = e.target.value;
		},
		// stopColorChanged(e) {
		// 	this.stopColor = e.target.value;
		// },
		startColorChanged(e) {
			localStorage.setItem('startColor', e.target.value);
			this.startColor = e.target.value;
		},
		strokeWidthChanged(e) {
			e.preventDefault();
			const val = e.target.value;
			if (!val || isNaN(val)) {
				return false;
			}
			this.strokeWidth = parseInt(val);
		},

		getTimer() {
			this.$api.getTomato(localStorage.uid).then(res => {
				console.log(res);
				this.completePomodoro = res.data;
			});
		}
	},
	created() {
		this.getTimer();
	}
};
</script>

<style scoped="scoped" lang="scss">
.theme {
	white-space: nowrap;
	/* overflow-x: hidden; */
	position: absolute;
	width: 200px;
	height: 100px;
	right: 10px;
	top: 35px;
	display: inline-block;
	font-size: 22px;
	padding: 2px 8px 2px 4px;
}
.themeSpan {
	width: 70px;
	display: inline-block;
}
.left {
	width: 13%;
	height: 100vh;
	background-color: #2c3e50;
}
.main {
	display: flex;
	flex: 1;
	position: relative;
	align-items: center;
	background-color: #f2f6fc;
	flex-direction: column;
	justify-content: center;
	// background: url(../assets/bck3.jpg) no-repeat;
	background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(../assets/bck3.jpg) no-repeat 0% 20% / cover;
}
#app {
	display: flex;
	flex-direction: row;
	margin-top: 50px;
}
.pomodoro-display {
	margin: 20px auto;
}
.pomodoro-display-controls {
	padding: 40px;
	margin: auto;
}
input {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 100%;
	margin-bottom: 10px;
}
label {
	margin-right: 15px;
}
</style>
